{% extends "editor/state_editor_row.html" %}

{% block cls %}oppia-interactive-widget-display{% endblock %}

{% block center %}
  <div ng-if="!hasLoaded" class="oppia-align-center">
    Loading
    <span class="oppia-loading-dot-one">.</span>
    <span class="oppia-loading-dot-two">.</span>
    <span class="oppia-loading-dot-three">.</span>
  </div>

  <div ng-if="hasLoaded">
    <div ng-if="!interactiveWidgetEditorIsShown">
      <div class="row">
        <div class="col-lg-11 col-md-11 col-sm-11">
          <div angular-html-bind="widgetPreviewHtml" class="oppia-preview"></div>
        </div>
        <div class="col-lg-1 col-md-1 col-sm-1">
          <button type="button" class="btn btn-default btn-xs pull-right" ng-click="showInteractiveWidgetEditor()" ng-if="editabilityService.isEditable()" ng-disabled="!hasLoaded">
            <span class="glyphicon glyphicon-pencil" title="Edit Interaction"></span>
          </button>
        </div>
      </div>
    </div>

    <div ng-if="interactiveWidgetEditorIsShown" style="margin: 10px; padding: 10px; border: 1px solid black;">
      <h5>
        <strong>Interaction Editor</strong>
      </h5>

      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <accordion close-others="true">
            <accordion-group heading="<[category]>" ng-repeat="(category, widgetList) in interactiveWidgetRepository" is-open="category === 'Basic Input'">
              <div ng-repeat="widget in widgetList | orderBy: 'widget_id'" ng-click="setNewTmpWidget(widget)" ng-class="widget.widget_id != tmpWidget.widget_id ? 'oppia-unselected-accordion-item': 'oppia-selected-accordion-item'">
                <[widget.name]>
              </div>
            </accordion-group>
          </accordion>
          <span class="help-block" style="font-size: smaller">
            <em>
              Don't see the type of interaction you want? <a href="https://code.google.com/p/oppia/issues/entry?template=Enhancement%20request" target="_blank">Tell us.</a>
            </em>
          </span>
        </div>

        <div class="col-lg-8 col-md-8 col-sm-8">
          <div ng-show="tmpWidget">
            <accordion close-others="true">
              <accordion-group is-open="accordionStatus.isPreviewOpen">
                <accordion-heading>
                  <!-- Due to how ui.bootstrap.accordion is set up, the manipulation of margin and padding is (unfortunately) necessary for the click target to cover the whole heading. -->
                  <a style="width: 100%; margin: -8px -15px; padding: 8px 15px;" ng-click="generateTmpWidgetPreview()" href="#">
                    Preview
                  </a>
                </accordion-heading>
                <div class="oppia-preview">
                  <div angular-html-bind="tmpWidget.tag"></div>
                </div>
              </accordion-group>

              <div ng-if="!isEmpty(tmpWidget.customization_args)">
                <accordion-group>
                  <accordion-heading>
                    <a href="#" ng-click="showCustomizationForm()">Customize</a>
                  </accordion-heading>
                  <form name="form.schemaForm">
                    <div ng-repeat="customizationArg in tmpWidget.customization_args">
                      <strong><[customizationArg.description]></strong>
                      <div>
                        <schema-based-editor local-value="customizationArg.value" schema="customizationArg.schema">
                        </schema-based-editor>
                      </div>
                    </div>
                  </form>
                </accordion-group>
              </div>
            </accordion>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
          <span class="pull-right" ng-if="tmpWidget">
            <button type="button" class="btn btn-default" ng-click="resetInteractiveWidgetEditor()">
              Cancel
            </button>
            <button type="button" class="btn btn-success" ng-click="selectInteractiveWidget(tmpWidget)" ng-disabled="form.schemaForm.$invalid">
              Save Interaction
            </button>
          </span>
        </div>
      </div>

    </div>
  </div>
{% endblock %}